<template>
  <div class="exif-parser-container">
    <div class="parser-header">
      <h3>天文摄影EXIF解析器</h3>
      <p>拖拽图片到下方区域或点击选择文件</p>
    </div>
    
    <!-- 拖拽上传区域 -->
    <div 
      class="drop-zone"
      :class="{ 'drag-over': isDragging }"
      @dragover.prevent="handleDragOver"
      @dragleave.prevent="handleDragLeave"
      @drop.prevent="handleDrop"
      @click="triggerFileSelect"
    >
      <div class="drop-zone-content">
        <div class="upload-icon">📁</div>
        <p>{{ dropZoneText }}</p>
        <small>支持 JPG, PNG, TIFF 格式</small>
      </div>
      <input 
        ref="fileInput" 
        type="file" 
        accept="image/jpeg,image/png,image/tiff" 
        style="display: none"
        @change="handleFileSelect"
      >
    </div>
    
    <!-- 上传进度 -->
    <div v-if="uploadProgress > 0 && uploadProgress < 100" class="upload-progress">
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: uploadProgress + '%' }"></div>
      </div>
      <p>{{ uploadProgress }}%</p>
    </div>
    
    <!-- 加载中 -->
    <div v-if="isLoading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>正在解析EXIF数据...</p>
    </div>
    
    <!-- 错误提示 -->
    <div v-if="errorMessage" class="error-message">
      <div class="error-icon">❌</div>
      <p>{{ errorMessage }}</p>
    </div>
    
    <!-- EXIF数据展示 -->
    <div v-if="exifData && !isLoading" class="exif-results">
      <div class="image-preview">
        <img :src="imagePreviewUrl" alt="预览图" />
      </div>
      
      <div class="exif-data">
        <h4>EXIF 信息</h4>
        
        <div class="exif-section">
          <h5>基本信息</h5>
          <div class="exif-item">
            <span class="label">文件名:</span>
            <span class="value">{{ fileName }}</span>
          </div>
          <div class="exif-item">
            <span class="label">文件大小:</span>
            <span class="value">{{ formatFileSize(fileSize) }}</span>
          </div>
          <div class="exif-item">
            <span class="label">尺寸:</span>
            <span class="value">{{ imageWidth }} × {{ imageHeight }} px</span>
          </div>
        </div>
        
        <div class="exif-section">
          <h5>相机信息</h5>
          <div class="exif-item">
            <span class="label">制造商:</span>
            <span class="value">{{ exifData.Make || '-' }}</span>
          </div>
          <div class="exif-item">
            <span class="label">型号:</span>
            <span class="value">{{ exifData.Model || '-' }}</span>
          </div>
          <div class="exif-item">
            <span class="label">镜头:</span>
            <span class="value">{{ exifData.LensModel || '-' }}</span>
          </div>
        </div>
        
        <div class="exif-section">
          <h5>拍摄参数</h5>
          <div class="exif-item">
            <span class="label">光圈:</span>
            <span class="value">{{ exifData.FNumber ? `f/${exifData.FNumber}` : '-' }}</span>
          </div>
          <div class="exif-item">
            <span class="label">快门速度:</span>
            <span class="value">{{ formatShutterSpeed(exifData.ExposureTime) }}</span>
          </div>
          <div class="exif-item">
            <span class="label">ISO:</span>
            <span class="value">{{ exifData.ISOSpeedRatings || '-' }}</span>
          </div>
          <div class="exif-item">
            <span class="label">焦距:</span>
            <span class="value">{{ exifData.FocalLength ? `${exifData.FocalLength} mm` : '-' }}</span>
          </div>
          <div class="exif-item">
            <span class="label">曝光补偿:</span>
            <span class="value">{{ exifData.ExposureBiasValue ? `${exifData.ExposureBiasValue} EV` : '-' }}</span>
          </div>
        </div>
        
        <div class="exif-section" v-if="exifData.DateTimeOriginal">
          <h5>时间信息</h5>
          <div class="exif-item">
            <span class="label">拍摄时间:</span>
            <span class="value">{{ formatDateTime(exifData.DateTimeOriginal) }}</span>
          </div>
        </div>
        
        <div class="exif-section" v-if="hasLocationData">
          <h5>位置信息</h5>
          <div class="exif-item">
            <span class="label">纬度:</span>
            <span class="value">{{ formatGPSCoordinate(exifData.GPSLatitude, exifData.GPSLatitudeRef) }}</span>
          </div>
          <div class="exif-item">
            <span class="label">经度:</span>
            <span class="value">{{ formatGPSCoordinate(exifData.GPSLongitude, exifData.GPSLongitudeRef) }}</span>
          </div>
          <div class="exif-item">
            <span class="label">海拔:</span>
            <span class="value">{{ exifData.GPSAltitude ? `${exifData.GPSAltitude} m` : '-' }}</span>
          </div>
          <div class="sky-info" v-if="skyCondition">
          <h6>当时天空条件估算:</h6>
          <div class="sky-condition">
            <div class="condition-item">
              <span class="icon">{{ skyCondition.visibility.icon }}</span>
              <span class="text">{{ skyCondition.visibility.text }}</span>
            </div>
            <div class="condition-item">
              <span class="icon">{{ skyCondition.moonPhase.icon }}</span>
              <span class="text">{{ skyCondition.moonPhase.text }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 天文摄影分析 -->
      <div class="exif-section" v-if="hasAstroAnalysis">
        <h5>天文摄影分析</h5>
        <div class="exif-item">
          <span class="label">500法则推荐曝光:</span>
          <span class="value" :class="{ warning: !isExposureTimeOptimal }">
            {{ recommendedExposureTime }}秒
            <small v-if="!isExposureTimeOptimal">(当前: {{ exifData.ExposureTime }})</small>
          </span>
        </div>
        <div class="exif-item">
          <span class="label">拍摄质量评估:</span>
          <span class="value">{{ imageQualityAssessment.text }}</span>
        </div>
        <div class="exif-item">
          <span class="label">设备适用性:</span>
          <span class="value">{{ equipmentSuitability }}</span>
        </div>
        <div v-if="photoTips.length > 0" class="photo-tips">
          <h6>拍摄建议:</h6>
          <ul>
            <li v-for="(tip, index) in photoTips" :key="index">{{ tip }}</li>
          </ul>
        </div>
        </div>
        
        <div class="action-buttons">
          <button @click="clearResults" class="clear-button">清除</button>
          <button @click="downloadExifData" class="download-button">下载EXIF数据</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
// 导入EXIF.js库
import * as EXIF from 'exif-js'

export default {
  name: 'ExifParser',
  setup() {
    // 文件相关状态
    const fileInput = ref(null)
    const isDragging = ref(false)
    const isLoading = ref(false)
    const uploadProgress = ref(0)
    const errorMessage = ref('')
    const dropZoneText = ref('拖拽图片到此处或点击上传')
    
    // 文件数据
    const selectedFile = ref(null)
    const fileName = ref('')
    const fileSize = ref(0)
    const imagePreviewUrl = ref('')
    const imageWidth = ref(0)
    const imageHeight = ref(0)
    const exifData = ref({})
    
    // 处理拖拽悬停
    const handleDragOver = (event) => {
      event.preventDefault()
      isDragging.value = true
      dropZoneText.value = '释放以上传图片'
    }
    
    // 处理拖拽离开
    const handleDragLeave = (event) => {
      event.preventDefault()
      isDragging.value = false
      dropZoneText.value = '拖拽图片到此处或点击上传'
    }
    
    // 处理拖拽释放
    const handleDrop = (event) => {
      event.preventDefault()
      isDragging.value = false
      dropZoneText.value = '拖拽图片到此处或点击上传'
      
      const files = event.dataTransfer.files
      if (files.length) {
        processFile(files[0])
      }
    }
    
    // 触发文件选择
    const triggerFileSelect = () => {
      fileInput.value.click()
    }
    
    // 处理文件选择
    const handleFileSelect = (event) => {
      const files = event.target.files
      if (files.length) {
        processFile(files[0])
      }
    }
    
    // 处理文件
    const processFile = (file) => {
      // 重置状态
      errorMessage.value = ''
      exifData.value = {}
      uploadProgress.value = 0
      
      // 检查文件类型
      const validTypes = ['image/jpeg', 'image/png', 'image/tiff']
      if (!validTypes.includes(file.type)) {
        errorMessage.value = '不支持的文件类型，请上传JPG、PNG或TIFF格式的图片'
        return
      }
      
      // 检查文件大小（限制10MB）
      if (file.size > 10 * 1024 * 1024) {
        errorMessage.value = '文件太大，请上传小于10MB的图片'
        return
      }
      
      selectedFile.value = file
      fileName.value = file.name
      fileSize.value = file.size
      
      // 显示上传进度（模拟）
      simulateUploadProgress()
      
      // 创建预览
      createImagePreview(file)
      
      // 解析EXIF
      setTimeout(() => {
        parseExifData(file)
      }, 1000)
    }
    
    // 模拟上传进度
    const simulateUploadProgress = () => {
      uploadProgress.value = 0
      const interval = setInterval(() => {
        uploadProgress.value += 10
        if (uploadProgress.value >= 100) {
          clearInterval(interval)
        }
      }, 100)
    }
    
    // 创建图片预览
    const createImagePreview = (file) => {
      const reader = new FileReader()
      reader.onload = (e) => {
        const img = new Image()
        img.onload = () => {
          imageWidth.value = img.width
          imageHeight.value = img.height
        }
        img.src = e.target.result
        imagePreviewUrl.value = e.target.result
      }
      reader.readAsDataURL(file)
    }
    
    // 解析EXIF数据
    const parseExifData = (file) => {
      isLoading.value = true
      
      try {
        // 使用EXIF.js解析真实的EXIF数据
        EXIF.getData(file, function() {
          // 获取所有EXIF数据
          const allExifData = EXIF.getAllTags(this)
          
          // 格式化GPS坐标
          const formatGPSCoordinate = (gpsData) => {
            if (!gpsData) return null
            
            // EXIF.js返回的GPS坐标是分数形式，需要转换为十进制
            const convertToDecimal = (degrees, minutes, seconds, direction) => {
              let decimal = degrees + minutes/60 + seconds/3600
              return direction === 'S' || direction === 'W' ? -decimal : decimal
            }
            
            // 处理纬度
            let latitude = null
            let longitude = null
            let altitude = null
            
            if (allExifData.GPSLatitude && allExifData.GPSLatitudeRef) {
              const latParts = allExifData.GPSLatitude
              const latDegrees = latParts[0].numerator / latParts[0].denominator
              const latMinutes = latParts[1].numerator / latParts[1].denominator
              const latSeconds = latParts[2].numerator / latParts[2].denominator
              latitude = [latDegrees, latMinutes, latSeconds]
            }
            
            // 处理经度
            if (allExifData.GPSLongitude && allExifData.GPSLongitudeRef) {
              const lonParts = allExifData.GPSLongitude
              const lonDegrees = lonParts[0].numerator / lonParts[0].denominator
              const lonMinutes = lonParts[1].numerator / lonParts[1].denominator
              const lonSeconds = lonParts[2].numerator / lonParts[2].denominator
              longitude = [lonDegrees, lonMinutes, lonSeconds]
            }
            
            // 处理海拔
            if (allExifData.GPSAltitude) {
              altitude = allExifData.GPSAltitude.numerator / allExifData.GPSAltitude.denominator
            }
            
            return {
              latitude,
              latitudeRef: allExifData.GPSLatitudeRef,
              longitude,
              longitudeRef: allExifData.GPSLongitudeRef,
              altitude
            }
          }
          
          // 格式化光圈值
          const formatFNumber = (fNumber) => {
            if (!fNumber) return null
            return fNumber.numerator / fNumber.denominator
          }
          
          // 格式化焦距
          const formatFocalLength = (focalLength) => {
            if (!focalLength) return null
            return focalLength.numerator / focalLength.denominator
          }
          
          // 格式化曝光补偿
          const formatExposureBias = (bias) => {
            if (!bias) return null
            return bias.numerator / bias.denominator
          }
          
          // 格式化快门速度
          const formatExposureTime = (time) => {
            if (!time) return null
            const numerator = time.numerator
            const denominator = time.denominator
            
            // 转换为可读格式
            if (denominator === 1) {
              return `${numerator}s`
            } else if (numerator === 1) {
              return `1/${denominator}`
            } else {
              return `${numerator}/${denominator}`
            }
          }
          
          // 提取GPS数据
          const gpsData = formatGPSCoordinate(allExifData)
          
          // 构建标准化的EXIF数据对象
          const standardizedData = {
            Make: allExifData.Make || null,
            Model: allExifData.Model || null,
            LensModel: allExifData.LensModel || null,
            FNumber: formatFNumber(allExifData.FNumber),
            ExposureTime: formatExposureTime(allExifData.ExposureTime),
            ISOSpeedRatings: allExifData.ISOSpeedRatings || null,
            FocalLength: formatFocalLength(allExifData.FocalLength),
            ExposureBiasValue: formatExposureBias(allExifData.ExposureBiasValue),
            DateTimeOriginal: allExifData.DateTimeOriginal || null,
            GPSLatitude: gpsData?.latitude,
            GPSLatitudeRef: gpsData?.latitudeRef,
            GPSLongitude: gpsData?.longitude,
            GPSLongitudeRef: gpsData?.longitudeRef,
            GPSAltitude: gpsData?.altitude
          }
          
          // 保存到状态
          exifData.value = standardizedData
          isLoading.value = false
          
          // 如果没有解析到数据，显示友好提示
          if (!Object.values(standardizedData).some(value => value !== null && value !== undefined)) {
            errorMessage.value = '无法从图片中提取EXIF数据，该图片可能没有包含EXIF信息或格式不支持'
          }
        })
      } catch (error) {
        console.error('EXIF解析错误:', error)
        errorMessage.value = '解析EXIF数据时发生错误'
        isLoading.value = false
      }
    }
    
    // 格式化文件大小
    const formatFileSize = (bytes) => {
      if (bytes === 0) return '0 Bytes'
      const k = 1024
      const sizes = ['Bytes', 'KB', 'MB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    }
    
    // 格式化快门速度
    const formatShutterSpeed = (speed) => {
      return speed || '-' 
    }
    
    // 格式化日期时间
    const formatDateTime = (dateTime) => {
      if (!dateTime) return '-' 
      return dateTime
    }
    
    // 格式化GPS坐标
    const formatGPSCoordinate = (coords, ref) => {
      if (!coords || !Array.isArray(coords)) return '-' 
      
      const [degrees, minutes, seconds] = coords
      return `${degrees}°${minutes}'${seconds.toFixed(2)}" ${ref}`
    }
    
    // 计算是否有位置数据
    const hasLocationData = computed(() => {
      return exifData.value.GPSLatitude && exifData.value.GPSLongitude
    })
    
    // 计算天空条件（基于时间和位置估算）
    const skyCondition = computed(() => {
      if (!hasLocationData.value || !exifData.value.DateTimeOriginal) return null
      
      const date = new Date(exifData.value.DateTimeOriginal)
      const month = date.getMonth() + 1
      
      // 基于月份估算月相（简化模型）
      const daysFromNewMoon = Math.floor((date.getTime() / (1000 * 60 * 60 * 24)) % 29.5)
      let moonPhase
      let moonIcon
      
      if (daysFromNewMoon < 7) {
        moonPhase = '新月'
        moonIcon = '🌙'
      } else if (daysFromNewMoon < 14) {
        moonPhase = '上弦月'
        moonIcon = '🌓'
      } else if (daysFromNewMoon < 21) {
        moonPhase = '满月'
        moonIcon = '🌕'
      } else {
        moonPhase = '下弦月'
        moonIcon = '🌗'
      }
      
      // 基于时间估算可见度
      const hour = date.getHours()
      let visibility
      let visibilityIcon
      
      if (hour >= 22 || hour <= 4) {
        // 深夜
        visibility = '极佳可见度'
        visibilityIcon = '⭐'
      } else if (hour >= 20 || hour <= 6) {
        // 黄昏或黎明
        visibility = '良好可见度'
        visibilityIcon = '🌤️'
      } else {
        // 白天
        visibility = '较差可见度'
        visibilityIcon = '☀️'
      }
      
      return {
        visibility: { icon: visibilityIcon, text: visibility },
        moonPhase: { icon: moonIcon, text: moonPhase }
      }
    })
    
    // 500法则计算推荐曝光时间
    const recommendedExposureTime = computed(() => {
      if (!exifData.value.FocalLength) return '-'
      
      // 500法则: 最大曝光时间(秒) = 500 / 焦距(mm)
      const recommended = 500 / exifData.value.FocalLength
      return recommended.toFixed(2)
    })
    
    // 判断曝光时间是否最优
    const isExposureTimeOptimal = computed(() => {
      if (!exifData.value.ExposureTime || !exifData.value.FocalLength) return false
      
      // 解析当前曝光时间
      let currentExposure
      const exposureStr = exifData.value.ExposureTime.toString()
      
      if (exposureStr.includes('s')) {
        currentExposure = parseFloat(exposureStr.replace('s', ''))
      } else if (exposureStr.includes('/')) {
        const [num, den] = exposureStr.split('/').map(Number)
        currentExposure = num / den
      } else {
        currentExposure = parseFloat(exposureStr)
      }
      
      // 计算推荐曝光时间
      const recommended = 500 / exifData.value.FocalLength
      
      // 允许10%的误差范围
      const tolerance = recommended * 0.1
      return Math.abs(currentExposure - recommended) <= tolerance
    })
    
    // 图像质量评估
    const imageQualityAssessment = computed(() => {
      if (!exifData.value.ISOSpeedRatings || !exifData.value.FNumber) {
        return { text: '信息不足，无法评估', color: 'neutral' }
      }
      
      // 基于ISO和光圈评估
      let score = 0
      
      // ISO评分 (越低越好)
      if (exifData.value.ISOSpeedRatings <= 800) score += 3
      else if (exifData.value.ISOSpeedRatings <= 1600) score += 2
      else if (exifData.value.ISOSpeedRatings <= 3200) score += 1
      
      // 光圈评分 (越大越好 - 数值越小)
      if (exifData.value.FNumber <= 2.8) score += 3
      else if (exifData.value.FNumber <= 4) score += 2
      else if (exifData.value.FNumber <= 5.6) score += 1
      
      // 曝光时间评分
      if (isExposureTimeOptimal.value) score += 2
      
      // 综合评估
      if (score >= 7) return { text: '优秀', color: 'good' }
      else if (score >= 5) return { text: '良好', color: 'ok' }
      else if (score >= 3) return { text: '一般', color: 'neutral' }
      else return { text: '需要改进', color: 'warning' }
    })
    
    // 设备适用性评估
    const equipmentSuitability = computed(() => {
      if (!exifData.value.Make || !exifData.value.Model) return '-'
      
      // 基于设备型号和参数的简化评估
      const isDSLR = exifData.value.Model && 
                    (exifData.value.Model.toLowerCase().includes('dslr') ||
                     exifData.value.Model.toLowerCase().includes('eos') ||
                     exifData.value.Model.toLowerCase().includes('d ') ||
                     exifData.value.Model.toLowerCase().includes('a ') ||
                     exifData.value.Model.toLowerCase().includes('α'))
      
      const hasWideAperture = exifData.value.FNumber && exifData.value.FNumber <= 4
      const hasLowLightCapability = exifData.value.ISOSpeedRatings && exifData.value.ISOSpeedRatings <= 3200
      
      if (isDSLR && hasWideAperture && hasLowLightCapability) {
        return '非常适合天文摄影'
      } else if (isDSLR || hasWideAperture) {
        return '适合天文摄影'
      } else {
        return '可用于天文摄影，但有局限性'
      }
    })
    
    // 生成拍摄建议
    const photoTips = computed(() => {
      const tips = []
      
      // 基于曝光时间的建议
      if (!isExposureTimeOptimal.value && exifData.value.FocalLength) {
        tips.push(`考虑使用${recommendedExposureTime.value}秒的曝光时间以减少星轨（500法则）`)
      }
      
      // 基于ISO的建议
      if (exifData.value.ISOSpeedRatings && exifData.value.ISOSpeedRatings > 3200) {
        tips.push('ISO值较高，可能会引入明显噪点，建议在不增加曝光时间的情况下降低ISO')
      }
      
      // 基于光圈的建议
      if (exifData.value.FNumber && exifData.value.FNumber > 4) {
        tips.push('考虑使用更大的光圈（更小的f值）以收集更多光线')
      }
      
      // 基于月相的建议
      if (skyCondition.value && skyCondition.value.moonPhase.text === '满月') {
        tips.push('满月期间天空较亮，建议拍摄月亮特写或月光风景，而非深空天体')
      }
      
      // 基于位置的建议
      if (hasLocationData.value) {
        tips.push('考虑使用天文摄影支架或赤道仪来获得更长时间的曝光')
      }
      
      // 如果没有特定问题，提供一般性建议
      if (tips.length === 0) {
        tips.push('使用遥控快门或延时拍摄功能避免相机抖动')
        tips.push('考虑使用反光板预升功能（如果设备支持）')
        tips.push('使用RAW格式拍摄以获得更大的后期处理空间')
      }
      
      return tips
    })
    
    // 是否有足够数据进行天文摄影分析
    const hasAstroAnalysis = computed(() => {
      return exifData.value.FocalLength || exifData.value.ExposureTime || 
             exifData.value.ISOSpeedRatings || exifData.value.FNumber
    })
    
    // 清除结果
    const clearResults = () => {
      exifData.value = {}
      imagePreviewUrl.value = ''
      fileName.value = ''
      fileSize.value = 0
      imageWidth.value = 0
      imageHeight.value = 0
      errorMessage.value = ''
      uploadProgress.value = 0
      if (fileInput.value) {
        fileInput.value.value = ''
      }
    }
    
    // 下载EXIF数据
    const downloadExifData = () => {
      const dataStr = JSON.stringify(exifData.value, null, 2)
      const blob = new Blob([dataStr], { type: 'application/json' })
      const url = URL.createObjectURL(blob)
      
      const a = document.createElement('a')
      a.href = url
      a.download = `${fileName.value.replace(/\.[^/.]+$/, '')}_exif.json`
      document.body.appendChild(a)
      a.click()
      
      setTimeout(() => {
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
      }, 0)
    }
    
    return {
      fileInput,
      isDragging,
      isLoading,
      uploadProgress,
      errorMessage,
      dropZoneText,
      fileName,
      fileSize,
      imagePreviewUrl,
      imageWidth,
      imageHeight,
      exifData,
      hasLocationData,
      skyCondition,
      hasAstroAnalysis,
      recommendedExposureTime,
      isExposureTimeOptimal,
      imageQualityAssessment,
      equipmentSuitability,
      photoTips,
      handleDragOver,
      handleDragLeave,
      handleDrop,
      triggerFileSelect,
      handleFileSelect,
      formatFileSize,
      formatShutterSpeed,
      formatDateTime,
      formatGPSCoordinate,
      clearResults,
      downloadExifData
    }
  }
}
</script>

<style scoped>
.exif-parser-container {
  background: rgba(10, 10, 42, 0.85);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(85, 136, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.parser-header {
  text-align: center;
  margin-bottom: 24px;
}

.parser-header h3 {
  color: #ffffff;
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}

.parser-header p {
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-size: 14px;
}

/* 拖拽上传区域 */
.drop-zone {
  border: 2px dashed rgba(85, 136, 255, 0.5);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(85, 136, 255, 0.05);
  margin-bottom: 20px;
}

.drop-zone:hover {
  border-color: rgba(85, 136, 255, 0.8);
  background: rgba(85, 136, 255, 0.1);
}

.drop-zone.drag-over {
  border-color: #5588ff;
  background: rgba(85, 136, 255, 0.15);
  transform: scale(1.02);
}

.drop-zone-content .upload-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.8;
}

.drop-zone-content p {
  color: #ffffff;
  margin: 0 0 8px;
  font-weight: 500;
}

.drop-zone-content small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

/* 上传进度 */
.upload-progress {
  margin-bottom: 20px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #5588ff, #7aa5ff);
  transition: width 0.3s ease;
}

.upload-progress p {
  color: #5588ff;
  text-align: center;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* 加载中 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(85, 136, 255, 0.3);
  border-radius: 50%;
  border-top-color: #5588ff;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-container p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* 错误提示 */
.error-message {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.error-icon {
  font-size: 24px;
  margin-right: 12px;
  flex-shrink: 0;
}

.error-message p {
  color: #ff6b6b;
  margin: 0;
  font-size: 14px;
}

/* EXIF结果展示 */
.exif-results {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  margin-top: 24px;
}

.image-preview {
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(85, 136, 255, 0.3);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
}

.image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.exif-data h4 {
  color: #ffffff;
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
}

.exif-section {
  background: rgba(85, 136, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(85, 136, 255, 0.1);
}

.exif-section h5 {
  color: #5588ff;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.exif-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exif-item:last-child {
  border-bottom: none;
}

.exif-item .label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.exif-item .value {
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}

/* 天空条件 */
  .sky-info {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .sky-info h6 {
    color: #ffffff;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
  }
  
  .sky-condition {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  
  .condition-item {
    display: flex;
    align-items: center;
    padding: 8px;
    background: rgba(85, 136, 255, 0.1);
    border-radius: 6px;
  }
  
  .condition-item .icon {
    font-size: 16px;
    margin-right: 6px;
  }
  
  .condition-item .text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
  }
  
  /* 天文摄影分析 */
  .exif-item .value.warning {
    color: #ffb74d;
  }
  
  .exif-item .value .small {
    font-size: 10px;
    opacity: 0.8;
    margin-left: 4px;
  }
  
  .photo-tips {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .photo-tips h6 {
    color: #ffffff;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
  }
  
  .photo-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .photo-tips li {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    line-height: 1.5;
    padding: 4px 0;
    position: relative;
    padding-left: 14px;
  }
  
  .photo-tips li::before {
    content: '💡';
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 10px;
  }

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.action-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-button {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.clear-button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.download-button {
  background: #5588ff;
  color: #ffffff;
  flex: 1;
}

.download-button:hover {
  background: #7aa5ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(85, 136, 255, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .exif-results {
    grid-template-columns: 1fr;
  }
  
  .image-preview {
    aspect-ratio: 16/9;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .download-button {
    order: -1;
  }
}

@media (max-width: 480px) {
  .exif-parser-container {
    padding: 16px;
  }
  
  .drop-zone {
    padding: 30px 16px;
  }
  
  .drop-zone-content .upload-icon {
    font-size: 36px;
  }
  
  .sky-condition {
    grid-template-columns: 1fr;
  }
}
</style>